<template>
  <div class="topUp">
    <div class="navigation">
      <div class="navigationL">
        <span></span>
        <span>门诊充值记录</span>
      </div>
      <div class="navigationR">
        <!-- <span>导入</span> -->
        <exporTo></exporTo>
        <span @click="exportsData">导出</span>
      </div>
    </div>
    <div class="tables">
      <div class="component1">
        <times @changeTime="setTime"></times>
        <search
          @setSizes="setSize"
          @setRestores="setRestore"
          :setSearchs="tableData"
        ></search>
      </div>
      <div>
        <el-table
          style="width: 100%"
          :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{ 'text-align': 'center' }"
          :data="tableData"
          id="table"
          @select-all="selection($event)"
          @select="operation($event)"
        >
          <el-table-column type="selection" />
          <el-table-column property="cz_time" label="操作时间" />
          <el-table-column property="cz_number" label="订单编号" />
          <el-table-column property="cz_name" label="患者姓名" />
          <el-table-column property="cz_iccid" label="就诊卡号" />
          <el-table-column property="cz_source" label="来源" />
          <el-table-column property="cz_type" label="业务类型" />
          <el-table-column property="cz_way" label="支付方式" />
          <el-table-column property="cz_money" label="支付金额(元)" />
          <el-table-column property="cz_state" label="支付状态" />
          <el-table-column property="cz_balance" label="卡内余额(元)" />
          <el-table-column label="操作">
            <span
              class="iconfont icon-_caozuorizhi notebook"
              @click="goDetails"
            ></span>
          </el-table-column>
        </el-table>
      </div>
      <div class="pages">
        <pages
          :pageLeng="tableData"
          @changeT="setPages"
          @changeTs="setPaget"
        ></pages>
      </div>
    </div>
  </div>
</template>
<script setup>
import { tableDatas, setDetails } from "../../utils/api/f_request";
import { useRouter } from "vue-router";
import { onMounted } from "vue";
import { ref } from "vue";
import pages from "../../components/home_wxq/feng/pageNumber.vue";
import times from "../../components/home_wxq/feng/TimeGet.vue";
import exporTo from "../../components/home_wxq/feng/expotsTo.vue";
import * as XLSX from "xlsx";
const router = useRouter();
onMounted(() => {
  tableDatass();
});
//获取页面数据
let tableData = ref([]);
const tableDatass = () => {
  tableDatas(obj).then((data) => {
    tableData.value = data.data.data;
  });
};
//获取到所有id
const selection = (e) => {
  console.log(e);
  console.log(123);
};
//获取到单个id
let DetailsId;
const operation = (e) => {
  DetailsId = e[0].cz_id;
};
//拿到单个id并请求
const goDetails = () => {
  setDetails(DetailsId).then((data) => {
    console.log(data.data.data);
    if (data.data.data != "") {
      router.push({
        name: "Particulars",
        params: { detailsDtat: JSON.stringify(data.data.data) },
      });
    } else {
      ElMessage.error("请选择患者");
    }
  });
};
//导出
const exportsData = () => {
  let workbook = XLSX.utils.table_to_book(document.getElementById("table"));
  try {
    XLSX.writeFile(workbook, "门诊充值记录.xlsx");
    ElMessage({
      type: "success",
      message: "导出成功!",
    });
  } catch (e) {
    ElMessage.error("导出失败,失败信息:!");
  }
};
//根据时间搜索
const setTime = (v) => {
  tableData.value = v;
};
//搜索数据
const setSize = (v) => {
  tableData.value = v;
};
//搜索还原
const setRestore = (v) => {
  tableDatass();
};
//每页条数
let obj = { a: 1, b: 10 };
//页码控制条数
const setPages = (v) => {
  obj.a = v;
  tableDatass(obj);
};
//下拉设置条数
const setPaget = (v) => {
  obj.b = v;
  tableDatass(obj);
};
</script>

<style lang="scss">
.notebook {
  color: #006eff;
  font-size: 30px;
  cursor: pointer;
}
.component1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 80px;
}
* {
  margin: 0;
  padding: 0;
}
.topUp {
  width: 100%;
  //头部
  .navigation {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    //左上
    .navigationL {
      margin: 30px 0;
      width: 50%;
      display: flex;
      flex-direction: row;
      align-items: center;
      span:nth-of-type(1) {
        display: inline-block;
        width: 30px;
        height: 10px;
        background-color: #006eff;
        border-radius: 35%;
        margin-right: 2%;
      }
      span:nth-of-type(2) {
        font-size: 25px;
      }
    }
    //右上
    .navigationR {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      width: 50%;
      span {
        display: block;
        background-color: #dbebff;
        width: 15%;
        text-align: center;
        line-height: 50px;
        color: #2684ff;
        height: 50px;
        border-radius: 5%;
        cursor: pointer;
      }
      span:hover {
        background-color: red;
        color: #fff;
      }
      span:nth-of-type(1) {
        margin-right: 2%;
      }
    }
  }
  //表格
  .tables {
    background-color: #fff;
    border-radius: 0.5%;
    width: 100%;
    height: 100%;
  }
}
</style> 